<template>
  <div style="padding-top: 54px;">
    <!--轮播图  -->
    <div class="home_swper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red" :show-indicators="true">
        <van-swipe-item v-for="item in banner" :key="item.id">
          <van-image width="100%" :src="item.image_url" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 宫格5个 -->
    <div class="home_list">
      <van-grid column-num="5">
        <van-grid-item v-for="item in channel" :key="item.id" :icon="item.icon_url" :text="item.name" />
      </van-grid>
    </div>
    <!-- 品牌制造 -->
    <div class="home_ppzz">
      <van-panel title="品牌制造商直供">
        <div>
          <van-grid column-num="2">
            <van-grid-item v-for="item in brandList" :key="item.id">
              <van-image width="100%" :src="item.list_pic_url" />
              <div class="brand_name">{{ item.name }}</div>
              <div class="brand_price">￥{{ item.floor_price }}元</div>
            </van-grid-item>
          </van-grid>
        </div>
      </van-panel>
    </div>
    <!-- 新品首发 -->
    <div class="home_xpsf">
      <van-panel title="周一周四·新品首发">
        <div>
          <van-grid column-num="2">
            <van-grid-item v-for="item in newGoodsList" :key="item.id" @click="toGoodsDetail(item.id)">
              <van-image width="100%" :src="item.list_pic_url" />
              <div class="brand_name">{{ item.name }}</div>
              <div class="brand_price">￥{{ item.retail_price }}元</div>
            </van-grid-item>
          </van-grid>
        </div>
      </van-panel>
    </div>
    <!-- 人气推荐 -->
    <div class="home_rqtj">
      <van-panel title="人气推荐">
        <div>
          <van-card v-for="item in hotGoodsList" :key="item.id" :price="item.retail_price.toFixed(2)"
            :desc="item.goods_brief" :title="item.name" :thumb="item.list_pic_url" />

        </div>
      </van-panel>
    </div>
    <!-- 专题精炼 -->
    <div class="theme-practice">
      <div class="theme-title">专题精炼</div>
      <van-swipe :loop="false" :width="300" :show-indicators="false">
        <van-swipe-item v-for="(item, index) in topicList" :key="item.id">
          <van-image width="100%" height="200" :src="item.item_pic_url" />
          <div class="theme-cradinfo">
            <div class="info-subtitle" style="font-size: 16px;color: #333;">
              {{ item.title }}
            </div>
            <div class="info-title" style="white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 13px;
    color: #999;
    margin-top: 10;">
              {{ item.subtitle }}
            </div>
            <div class="info-price" style="    font-size: 12px;
    color: #8b0000;
    margin-top: 10px;
    display: block;">
              ￥{{ item.price_info }}元
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 新品首发 -->
    <div class="home_xpsf">
      <van-panel title="周一周四·新品首发">
        <div>
          <van-grid column-num="2">
            <van-grid-item v-for="item in newGoodsList" :key="item.id" @click="toGoodsDetail(item.id)">
              <van-image width="100%" :src="item.list_pic_url" />
              <div class="brand_name">{{ item.name }}</div>
              <div class="brand_price">￥{{ item.retail_price }}元</div>
            </van-grid-item>
          </van-grid>
        </div>
      </van-panel>
    </div>
    <BackTop></BackTop>
  </div>
</template>

<script>
import { GetHome } from "@/api";
import BackTop from '@/components/BackTop/BackTop.vue'
export default {
  components:{
    BackTop
  },
  async mounted() {
    const {
      data: {
        data: { banner, channel, brandList, newGoodsList, hotGoodsList, topicList },
      },
    } = await GetHome();
    console.log(banner);
    this.banner = banner;
    this.channel = channel;
    this.brandList = brandList;
    this.newGoodsList = newGoodsList;
    this.hotGoodsList = hotGoodsList;
    this.topicList = topicList
  },
  data() {
    return {
      banner: [], //轮播图
      channel: [], //通道
      brandList: [],
      newGoodsList: [],//新品首发
      hotGoodsList: [],//人气推荐
      topicList: [], //专题精炼

    }
  },
  methods:{
    toGoodsDetail(id){
      this.$router.push({path:'/goodsDetail',query:{id}})
    }
  }
};
</script>

<style scoped>
.theme-practice .van-swipe-item:nth-child(2) {
  margin: 0 20px !important;
}

.theme-practice .theme-title {
  text-align: center;
  height: 62px;
  line-height: 62px;
  color: #333333;
  font-size: 18px;
}

.my-swipe .van-swipe-item {
  height: 208px;
  color: yellow;
  font-size: 30px;
  line-height: 150px;
  text-align: center;
  /* background-color: #39a9ed; */
}

.home_ppzz .van-panel .van-cell__title {
  text-align: center;
  font-size: 18px;
}

.home_ppzz .van-grid-item {}

.home_ppzz .van-grid-item .brand_name {
  position: absolute;
  left: 20px;
  top: 30px;
}

.home_ppzz .van-grid-item .brand_price {
  position: absolute;
  left: 20px;
  top: 60px;
  font-size: 14px;
  color: brown;
}

.home_xpsf .van-panel .van-cell__title {
  text-align: center;
  font-size: 18px;
}

.home_rqtj .van-panel .van-cell__title {
  text-align: center;
  font-size: 18px;
}

.home_rqtj .van-card__price {
  color: red;
}
</style>
